<template>
	<view>
		<view @touchmove.stop.prevent="clear" class="share" v-if="showShare" :class="[animation?'moves':'selectedmove']">
			<slot></slot>
		</view>
		<view @click="hiddenshow" class="marsk" :class="[animation?'opacitytest':'']" v-if="showShare"></view>
	</view>
</template>

<script>
	export default{
		props:{
			showShare:{
				type:Boolean,
				default:false,
			},
			animation:{
				type:Boolean,
				default:false,
			}
		},
		data(){
			return{
				
			}
		},
		methods:{
			hiddenshow() {
				uni.$emit('closewindown',false);
			},
		}
	}
</script>

<style lang="scss">
	//遮罩层
	.marsk {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		transition-property: opacity;
		transition-duration: 0.2s;
		opacity: 0;
		z-index: 990;
		background-color: #000;
	}
	
	.opacitytest {
		opacity: 0.5;
	}
	
	.moves {
		transform: translateY(0);
	}
	
	.selectedmove {
		transform: translateY(350rpx);
	}
	
	.share-botton {
		font-weight: bold;
		width: 80%;
		margin: 0 auto;
		height: 120rpx;
		background-color: #fff;
		border-radius: 20rpx;
		display: flex;
		font-size: 32rpx;
	}
	
	.yaoqing {
		margin-right: 15rpx;
	}
	
	.share-left {
		display: flex;
		flex-direction: column;
		color: #bc5300;
		background-color: #fdd2b0;
		justify-content: center;
		align-items: center;
		border-top-left-radius: 20rpx;
		border-bottom-left-radius: 20rpx;
		flex: 2;
	}
	
	.share-right {
		flex: 3;
		display: flex;
		justify-content: center;
		align-items: center;
		color: #0f8cfa;
		font-size: 35rpx;
	}
	
	.copybg {
		background-color: #fd8425;
		font-size: 25rpx;
		color: #fff;
		border-radius: 10rpx;
		width: 75rpx;
		text-align: center;
	}
	
	.share-code {
		width: 80%;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	
	/*分享操作*/
	.share {
		position: fixed;
		display: flex;
		bottom: 0;
		z-index: 999;
		background-color: #fff;
		border-top-right-radius: 20rpx;
		border-top-left-radius: 20rpx;
		width: 100vw;
		height: 350rpx;
		justify-content: space-around;
		align-items: center;
		transition-property: transform;
		transition-duration: 0.1s;
		transition-timing-function: cubic-bezier(.5, .49, .57, 1.21);
	
	}
	
	.share image {
		height: 127rpx;
		width: 125rpx;
		margin-bottom: 20rpx;
	}
	
	.share text {
		color: #303030;
		font-size: 30rpx;
		margin-bottom: 15rpx;
	}
</style>
